<script setup>
import { ref, inject } from 'vue'
const items = ref([
  {
    key: '1',
    label: 'Rares',
    title: 'Rares',
  },
  {
    key: '2',
    label: 'Crafts',
    title: 'Crafts',
  },
  {
    key: '3',
    label: 'Runeword Builder',
    title: 'Runeword Builder',
  },
  {
    key: '4',
    label: 'Runes',
    title: 'Runes',
  },
  {
    key: 'sub1',
    label: 'Runewords',
    title: 'Runewords',
    children: [],
  },
  {
    key: 'sub2',
    label: 'Charms',
    title: 'Charms',
    children: [],
  },
  {
    key: 'sub3',
    label: 'Jewels',
    title: 'Jewels',
    children: [],
  },
  {
    key: 'sub4',
    label: 'Amulets',
    title: 'Amulets',
    children: [],
  },
  {
    key: 'sub5',
    label: 'Rings',
    title: 'Rings',
    children: [
      {
        key: '7',
        label: 'Option 7',
        title: 'Option 7',
      },
    ],
  },
  {
    key: 'sub6',
    label: 'Armor',
    title: 'Armor',
    children: [],
  },
  {
    key: 'sub7',
    label: 'Belts',
    title: 'Belts',
    children: [],
  },
  {
    key: 'sub8',
    label: 'Gloves',
    title: 'Gloves',
    children: [],
  },
  {
    key: 'sub9',
    label: 'Helms',
    title: 'Helms',
    children: [],
  },
  {
    key: 'sub10',
    label: 'Shields',
    title: 'Shields',
    children: [],
  },
  {
    key: 'sub11',
    label: 'Weapons',
    title: 'Weapons',
    children: [],
  },
  {
    key: 'sub12',
    label: 'Set Items',
    title: 'Set Items',
    children: [],
  },
  {
    key: 'sub11',
    label: 'Gems',
    title: 'Gems',
    children: [],
  },
  {
    key: 'sub11',
    label: 'Keys + Organs',
    title: 'Keys + Organs',
    children: [],
  },
  {
    key: 'sub11',
    label: 'Essences + Tokens',
    title: 'Essences + Tokens',
    children: [],
  },
])
const categoryList = inject('categoryList')
console.log(categoryList.value)
</script>
<template>
  <div class="flex-1 grid grid-cols-3 gap-5 max-[750px]:gap-2 max-[750px]:grid-cols-2">
    <div
      v-for="item in categoryList"
      class="w-[70%] h-20 flex items-center justify-center c-item relative mx-auto cursor-pointer max-[750px]:w-full"
      :key="item.key"
    >
      <img
        :src="item.pic"
        alt=""
        class="w-full h-full object-cover absolute transition-all duration-300 ease-in-out"
      />
      <span class="z-1 text-white"> {{ item.title }} </span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.c-item {
  overflow: hidden;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  &:hover {
    img {
      transform: scale(1.2);
    }
  }
}
</style>
